<template>
  <div class="common">
      <div v-show="tabListShow" class="head-tab">
        <zan-tab
          :scroll="scroll"
          :list="tabList"
          :selected-id="selectedId" 
          @tabchange="handleTabChange"
        />
      </div>   
      <div class="banner-box" v-if="bannerImg">
          <image  class="img"  mode="scaleToFill"  :src="'http://renqing123.oss-cn-shenzhen.aliyuncs.com/'+bannerImg"  ></image>
      </div>
      <msg-page v-if="resource_type==1"  @jumpDetail="jumpDetail"   @shoucang="shoucang"></msg-page> 
      <vid-page v-if="resource_type==2" :prop="vidList"></vid-page> 
      <!--<paste-page ></paste-page>-->
 
      <div class="text-center loadmore" v-if="loadmore">没有更多..</div>
  </div>
</template>

<script>
 
import msgPage from '@/components/msg-page' 
import vidPage from '@/components/vid-page' 
import pastePage from '@/components/paste-page' 
import * as api  from '@/utils/api'
import {formatTab}  from '@/utils/method'
import store from './store'
export default {
  onLoad(opt){
    wx.setNavigationBarTitle({ title: opt.title });
    this.getTabList(opt.typeId);
    this.typeId=opt.typeId;
  },
  components: {
    msgPage,
    vidPage,
    pastePage
  }, 
  data () {
    return {
      tabListShow:false,
      tabList:[],
      tabArrList:[], //tabs 数据
      selectedId: '',
      scroll:true, //是否能滚动
      typeId:'2',  //tabs
      resource_type:-1,  
      vidList:[], //视频音频
      msgList:[],//文章详情
      offset:0,
      limit:10,
      count:0,  //总条数
      loadmore:false,

      bannerImg:'',
    }
  }, 
  methods:{
    getTabList(typeId){
      let vm =this;
      vm.resource_type=-1;
      vm.tabList=[];
      let body={
        model: "Tabs",
        condition:{
          type: typeId, 
        }
      };
      api.commonSite(body).then(res=>{ 
          let arrList=[];
          if(res.data.code==200){ 
            res.data.data.count>4?vm.scroll=true:vm.scroll=false;
            res.data.data.count!=0?vm.tabListShow=true:vm.tabListShow=false;
            res.data.data.data.forEach((item,index)=>{ 
              if(index==0)vm.selectedId=`${item.tab_id}/${item.resource_type}`;
              let obj=item;
              obj.id=`${item.tab_id}/${item.resource_type}`;
              arrList.push(obj);
            }); 
            vm.resource_type=arrList[0].resource_type; 
            vm.getPrdList(formatTab('id',vm.selectedId));
            
          } 
          vm.tabList=arrList;
          vm.bannerImg=vm.tabList[0].images;
      });
    },
    getPrdList(tabId,val){
      let vm =this;
      let body={
        model: "Resources",
        condition:{
          tab_id: tabId, 
        },
        with:{ 
            "0":"tabs", 
        },
        offset:vm.offset,
        limit:vm.limit
      };
      api.commonSite(body).then(res=>{  
          if(res.data.code==200){ 
            vm.count=res.data.data.count; 
            if(vm.resource_type==2){
              if(val=='down'){  
                res.data.data.data.forEach((item,index)=>{
                  vm.vidList.push(item);  
                });
              }else{
                  vm.vidList=res.data.data.data; 
              }  
              if(vm.typeId==1){
                store.state.vidPageList=vm.vidList;
              } else {
                store.state.vidPageList=[];
              } 
            }else if(vm.resource_type==1){
              if(val=='down'){  
                res.data.data.data.forEach((item,index)=>{
                  vm.msgList.push(item);  
                });
              }else{
                  vm.msgList=res.data.data.data; 
              } 
            } 
          }  
      });
    }, 
    handleTabChange(e) {  
      console.log(formatTab('id',e.mp.detail));
      let vm = this;
      
      vm.tabList.forEach((item,index)=>{ 
        if(item.tab_id==formatTab('id',e.mp.detail)){
          vm.bannerImg=vm.tabList[index].images;
        }
      });

      this.offset=0;
      this.limit=10;
      this.count=0;  //总条数
      this.loadmore=false;
      
      this.selectedId=e.mp.detail;
      this.getPrdList(formatTab('id',e.mp.detail));
      this.resource_type=formatTab('type',e.mp.detail); 
    },
    //跳转详情
    jumpDetail(item){
      let url = `./../article-detail/main?artId=${item.id}`;
      wx.navigateTo({url}) 
    },
    //收藏
    shoucang(val,item){
        let vm = this;
        let body={
            model: "Records",
            data:{
                uid: wx.getStorageSync('u_id'),      
                resource_id: item.article_id,   
                type:1,        
                resource_type: item.tabs.type,   
                category:"1" 
            } 
        }; 
        if(val=='clear'){
            api.deleteData(body).then(res=>{
                if(res.data.code==200){
                    vm.getPrdList(formatTab('id',vm.selectedId));
                    wx.showToast({icon:'none', title: '取消成功' })
                }
            });
        }else{
            api.createSite(body).then(res=>{
                if(res.data.code==200){
                    vm.getPrdList(formatTab('id',vm.selectedId));
                    wx.showToast({icon:'none', title: '收藏成功' })
                }
            });
        }
        
    },
  },
  // 上拉加载，拉到底部触发
  onReachBottom() {
    this.offset+=this.limit;
    if(this.count==this.vidList.length)this.loadmore=true;
    if(this.count>this.vidList.length){
      this.getPrdList(formatTab('id',this.selectedId),'down');
    } 
  },
  created () {
    
  }
}

</script>

<style scoped lang="scss">
.common{
  padding-top:90rpx;
  .head-tab{
    position:fixed;
    top:0;
    width:100%;
    height:90rpx;
    background:#fff; 
    z-index:20;
  }
  .banner-box{
      width:100%;
      height:240rpx;
      padding:0 20rpx;
      margin:20rpx 0;
      box-sizing:border-box;
      .img{
        width:100%; 
        height:100%;
        border-radius:20rpx;
      }
  }
  .loadmore{
    font-size:28rpx;
    color:#ccc; 
    padding-bottom:40rpx;
  }
}

</style>
